.box1{
    .box2{
        color: red;
    }
    >.box3{
        color: yellow;
        &:hover{
            color: blue;
        }
    }
    //为box1设置一个hover
    //& 就表示外层的父元素
    &:hover{
        color: orange;
    }
}
.p1{
    width: 100px;
    height: 200px;
}
// .p2{
//     width: 100px;
//     height: 200px;
//     color: red;
// }
//:extend() 对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
    color: red;
}
.p3{
    //直接对指定的样式进行引用,这里相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}
//使用类选择器时可以直接在选择器后边加一个括号,这时我们实际上就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}
.p5{
    .p4;
}
// 混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px){
    width: @w;
    height: 100px;
    border: 1px solid red;
}
div{
    //调用混合函数,按顺序传递参数
    // .test(100px,300px);    
    .test(@w:100px,@h:300px);
}
span{
    //average颜色平均
    color:average(red,yellow);
}

html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background-color: #bfa;
}
body:hover{
    //darken加强颜色
    background-color:darken(#bfa,100%)
}